<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>左栏弹出效果</title>
        <style>
            /* 结合实际html结构--通配【合理】 */
            *{
                font: 16px "微软雅黑";
                /* 去掉内外边距 */
                margin: 0;
                padding: 0;
                /* 无序列表：有样式---“去一个样式：列表项” */
                list-style-type: none;
                /* 无序列表：有样式---
                去全部样式：list-style-tyle 去列表项样式
                           list-style-position 去列表项标记位置样式
                           list-style-image  去列表项图片标记样式
                           
                 */
                list-style: none;
            }
            /* 左栏效果
             1.左栏空间区域  235*460  背景颜色
             2.左栏区域内容【li】  加权 235*50 相对定位--挂靠点【固定位置】
             3.给每个区域内容【li】 加鼠标移动上去改背景颜色
             4.左栏弹出框：400*450 1像素边框 绝对定位-钩子 微调
             */
            aside{
                width: 235px;
                height: 530px;
                background: #ababab;
            }
            aside ul.sidebar li{
                width: 235px;
                height: 50px;
                /* 相对定位-挂靠点 */
                position: relative;
                text-align: left;
                line-height: 50px;
				top: 15px;
				/*  */
				paddi ng-left:30px;
            }
            aside ul.sidebar li:hover{
                background: #eee;
            }
            aside ul.sidebar div.out{
                width: 400px;
                height: 450px;
                border: 1px soild red;
                position: absolute;
                left: 285px;
				/* 显示与隐藏  JavaScript[JQuery框架] */
				display: none;
            }
			aside ul.sidebar li span{
				border: 1px solid red;
				pos ition: absolute;
				lef t: 220px;
				float: right;
				/* 间隙 内边距 */
				padding-right:50px ;
			}
        </style>
    </head>
    <body>
        <!-- hetml结构  结构话标记【语义化标签】
          aside元素 针对：左栏、广告、弹出效果...  有利于SEO优化
            之前版本通过div+id起别名方式【缺点：繁琐、定义起名、冗余】
         -->
         <aside>
            <ul class="sidebar">
             <!-- 弹出框 -->
             <div class="out"></div>
             <li>手机 平板 电话卡<span>></span></li>
             <li>电视 盒子<span>></span></li>
             <li>电视 盒子<span>></span></li>
             <li>移动电源 插线板<span>></span></li>
             <li>耳机 音箱<span>></span></li>
             <li>电池 存储卡<span>></span></li>
             <li>保护套 后盖<span>></span></li>
             <li>贴膜 其他配件<span>></span></li>
             <li>米兔 服装<span>></span></li>
			 <li>箱包 其他周边<span>></span></li>
            </ul>
         </aside>
    </body>
</html>